<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Network Video</title>
<link rel="stylesheet" type="text/css"  href="web/Tree.css"/>
<link rel="stylesheet" type="text/css" href="web/pagestyle.css"/>
<style type="text/css">
html, body {
	width : 100%;
	height : 100%;
	padding : 0;
	margin : 0;
	font-size: 11pt;
	color:#000000;
	background-attachment:fixed;
}

.table {
	border-collapse:collapse;
	border:0;
}
.table td {
	padding:0;
}
#content{ overflow:hidden}
</style>
<script>
document.write("<script src='/cgi-bin/user.cgi?n="+Math.random()+"'></"+"script>");
</script>
<script src="web/jquery-1.3.2.min.js"></script>
<script src="web/AddChn_en.js"></script>
<script src="web/TreeView.js"></script>
<script src="web/operation_en.js"></script>
<script type="text/javascript">
self.moveTo(0, 0);
self.resizeTo(screen.availWidth, screen.availHeight);
window.onresize = function() {
           window.resizeTo(screen.availWidth, screen.availHeight);
       }
var iWidth = 0;
var iHeight = 0;
var Player = null;
var browser = "";
$(function(){
        $("#firstpane table.menu_head").click(function()
        {              
            $(this).next("div.menu_body").slideToggle(250).siblings("div.menu_body").slideUp(250);
        });
    });

    if (window.XMLHttpRequest) { //Mozilla, Safari, IE7
        if (!window.ActiveXObject) { // Mozilla, Safari,
            browser = 'Mozilla, Safari';
        } else {
            browser = 'IE7';
        }
    } else {
        browser = 'IE6';
    }
function on_load(){             
    loadPage();
	if(browser!="IE6")
	{
	 window.onresize = findDimensions;
	}
}
function loadPage()
{
    var levelType= new Array("Guest","User","Admin"); 
    //iWidth=window.screen.availWidth-56-171*2;
    iWidth=document.body.clientWidth-171*2;
    iHeight=document.body.clientHeight-40;
    $("#header").width(document.body.scrollWidth);
    $("#body").width(document.body.scrollWidth);
    //$("#header").width(1280);
    //$("#body").width(1280);
    $("#name").html(getCookie("User")); 
    $("#level").html(levelType[LogLevel-1]); 
    $("#mainbox").height(iHeight);
    $("#leftbox").height(iHeight);
    $("#rightbox").height(iHeight);
    $(".menu_list").height(iHeight-16);
    $(".menu_body").height(iHeight-68);  
    $("#container").height(iHeight-23); 
    $("#treebox").height(iHeight-211);
    $("#tree").height(iHeight-221);  
    var tv = new treeview("treeview",false,false);
    var root = new node("Device",0);
    tv.add(root);
    for(var i=1;i<=chnNum;i++)
        root.add(new node('CHN '+i,1,i));    
    tv.create(document.getElementById("tree"));
    root.expand();
    var playerH=iHeight-16;   
    var playerW=iWidth-30;
    //if(playerW>(playerH*375/290))
    //    playerW=playerH*375/290; 
    CreateControl("OBJ_DIV","CLSID:5E43BC8E-FE59-4DF4-8061-9DD3CF77A380","NvsPlayer", playerW, playerH);
    var p=window.location.port;
    if(p==0)p=80;
    Player=document.getElementById("NvsPlayer"); 
    Connect(window.location.hostname, p, getCookie("sessionId"), "", LogLevel) ;
    if(typeof(Language) != 'undefined')
        SetLanguage(Language);
    AddNumBtn();

}
function findDimensions() {
   iWidth=document.body.clientWidth-171*2;
    iHeight=document.body.clientHeight-40; 
	//$("#content").height(iHeight+36);  
	$("#mainbox").height(iHeight);
    $("#leftbox").height(iHeight);
    $("#rightbox").height(iHeight);
    $(".menu_list").height(iHeight-16);
    $(".menu_body").height(iHeight-68);  
    $("#container").height(iHeight-23); 
    $("#treebox").height(iHeight-211);
    $("#tree").height(iHeight-221);   
    var playerH=iHeight-16;   
    var playerW=iWidth-30;    
    //if(playerW>(playerH*375/290))
    //    playerW=playerH*375/290; 
    NvsPlayer.style.height = playerH;
    NvsPlayer.style.width = playerW;
  }
</script>
</head>
<body onload="on_load()">
<div id="content">
<table style="width:100%;border:0; margin:0; vertical-align:top;" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border:0;" align="center"><table width="100%" class="table" id="header">
        <tr>
        
          <td height="26" class="main_18"><table width="100%" class="table">
              <tr>
                <td width="180" height="26" class="main_16"></td>
                <td><table width="100%" class="table">
                    <tr>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetVideoList()" valign="middle" ><div class="views"/>
                              <span>Query</span></td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetDevinfo()" valign="middle" ><div class="devin"/>
                              Info</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetNetwork()"  valign="middle"><div class="example"/>
                              Network</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetMedia()" valign="middle"><div class="config" />
                              Media</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetAlarm()"  valign="middle"><div class="info" />
                              Alarm</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="GetAcc()" valign="middle" ><div class="admin"/>
                             Account</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" onclick="RebootDev();" valign="middle" ><div class="add" />
                              Reboot</td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" valign="middle"><div class="page_add" />
                              <a href="web/NVSOcx.msi" style="color: #2b7dbb; text-decoration:none">Get Ocx</a></td>
                          </tr>
                        </table></td>
                      <td width="76"><table width="74" class="table">
                          <tr>
                            <td height="18" class="TOPBG" onmouseover="this.className='TOPBGOVER';" onmouseout="this.className='TOPBG';" valign="middle"><div class="redo" />
                              <a href="#" style="color: #2b7dbb; text-decoration:none" onclick="LogOut(this);">Logout</a></td>
                          </tr>
                        </table></td>
                      <td valign="bottom"></td>
                    </tr>
                  </table></td>
                <td width="200"><span class="STYLE1">Welcome:<span id="name"></span> Group:<span id="level" ></span></span></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td style="border:0" id="mainbox" align="center"><table id="body" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="171" align="left" valign="top" id="leftbox"><table width="171" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"  style="table-layout:fixed;">
                    <tr>
                      <td style="width:3px; background:#0a5c8e;"></td>
                      <td><table width="100%"  border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                          <tr>
                            <td valign="top"><div id="firstpane" class="menu_list">
                                <table width="170"  border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;" class="menu_head">
                                  <tr>
                                    <td height="5" style="line-height:5px; background:#0a5c8e;">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td  class="main_45" align="center"><font class="menufont">Management Menu</font></td>
                                  </tr>
                                </table>
                                <div class="menu_body" style="display:block;">
                                  <table width="168" border="0" cellpadding="0" cellspacing="3">
                                    <tr>
                                      <td style="height:5">&nbsp;</td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="viewfullscreen" onmouseover="this.className='viewfullscreen_1';" onmouseout="this.className='viewfullscreen';" onclick="FullScreen();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="FullScreen();" >Full Screen</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="connected" onmouseover="this.className='connected_1';" onmouseout="this.className='connected';" onclick="StartRecord();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="StartRecord();">Record ON/OFF</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="on_line" onmouseover="this.className='on_line_1';" onmouseout="this.className='on_line';" onclick="StartTalk();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="StartTalk();">Talk Start/Stop</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="speaker" onmouseover="this.className='speaker_1';" onmouseout="this.className='speaker';" onclick="PlaySound();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="PlaySound();">Vioce ON/OFF</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="screen" onmouseover="this.className='screen_1';" onmouseout="this.className='screen';" onclick="CapturePic();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="CapturePic();">Capture Picture</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="clock" onmouseover="this.className='clock_1';" onmouseout="this.className='clock';" onclick="SetTime();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="SetTime();">Time Sync</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td class="iconcells"><div class="unreadable" onmouseover="this.className='unreadable_1';" onmouseout="this.className='unreadable';" onclick="StopVideo();" style="cursor:pointer"/></td>
                                      <td><table>
                                          <tr>
                                            <td valign="middle" class='unselect' align="left" onmouseover="this.className='mouseover';this.style.borderWidth='1'; " onmouseout="this.className='unselect';" onclick="StopVideo();">Video stop</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                      <td style="height:152px">&nbsp;</td>
                                    </tr>
                                  </table>
                                </div>
                                <table width="168" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed; margin-top:1px;margin-bottom:1px;" class="menu_head">
                                  <tr>
                                    <td class="main_45" align="center"><font class="menufont">Channels Switch</font></td>
                                  </tr>
                                </table>
                                <div class="menu_body" style="display:none;">
                                  <table width="100%" id="switchBox">
                                  </table>
                                </div>
                              </div></td>
                          </tr>
                          <tr>
                            <td class="main_45" style="height: 23px">&nbsp;</td>
                          </tr>
                          <tr>
                            <td height="7" style="line-height:7px; background:#0a5c8e;">&nbsp;</td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
          <td width="9" valign="middle" align="left"  bgcolor="#0a5c8e" onclick="switchSysBar('leftbox')"><div class="main_41" id="leftmenu" title="ON/OFF Left Panel"></div></td>
          <td align="center" valign="top" width="100%"><table width="100%"  border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
              <tr>
                <td height="8" style=" line-height:8px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
                    <tr>
                      <td style="line-height:8px;background:#0a5c8e;">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td><table id="container" width="100%"  border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                    <tr>
                      <td width="100%" border="1" align="center" valign="middle"><table  bgcolor="#0a5c8e" width="100%"  border="1" bordercolor="#5C743D" align="left">
                          <tr>
                            <td width="100%" align="center" valign="middle" >
                            <div id="OBJ_DIV" align="center" style="z-index: 7;height:100%; vertical-align:middle; text-align:center"></div></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
                    <tr>
                      <td style="line-height:8px;background-color:#0a5c8e">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
          <td width="9" valign="middle"  bgcolor="#0a5c8e" onclick="switchSysBar('rightbox')" align="right"><div class="main_41"  id="rightmenu" title="ON/OFF Right Panel"/></td>
          <td width="180" id='rightbox' align="right" valign="top"><table width="171" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"  style="table-layout:fixed;">
                    <tr>
                      <td><table width="100%"  border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td height="5" style="line-height:5px; background:#0a5c8e;">&nbsp;</td>
                          </tr>
                          <tr>
                            <td height="23" class="main_45" align="center"><font class="menufont">Video List</font></td>
                          </tr>
                          <tr>
                            <td bgcolor="#e5f4fd"  id='treebox' valign="top" align="left" width="90%"><div style="height:5px"></div>
                              <div id="tree" style="overflow:scroll"/></td>
                          </tr>
                          <tr>
                            <td align="center" width="100%"><fieldset style="width: 160">
                                <legend style="font-size:10pt;">PTZ Control</legend>
                                <table cellspacing="0" border="0">
                                  <tr>
                                    <td style="width:32"/>
                                    <td style="width:96"><div class="up" title="Up" onmouseover="this.className='up_1';" onmouseout="this.className='up';" onmousedown="ctrl_ptz(1, 0);" onmouseup="ctrl_ptz(1,1);"/></td>
                                    <td style="width:32"/>
                                  </tr>
                              <tr>
                                    <td style="width:24;height:96;"><div class="left" title="Left" onmouseover="this.className='left_1';" onmouseout="this.className='left';" onmousedown="ctrl_ptz(3, 0);" onmouseup="ctrl_ptz(3,1);"/></td>
                                    <td style="width:96;"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                          <td class="reset_1" />
                                          <td class="reset_2" onmouseover="this.className='reset_2_1';" onmouseout="this.className='reset_2';" title="Zoom In" onmousedown="ctrl_ptz(9, 0);" onmouseup="ctrl_ptz(9,1);"/>
                                          <td class="reset_3"/>
                                        </tr>
                                        <tr>
                                          <td class="reset_4" onmouseover="this.className='reset_4_1';" onmouseout="this.className='reset_4';" title="Focus Near" onmousedown="ctrl_ptz(11, 0);" onmouseup="ctrl_ptz(11,1);"/>
                                          <td  class="reset_5" onmouseover="this.className='reset_5_1';" onmouseout="this.className='reset_5';" title="Preset"  onclick="ctrl_ptz(14,1);"/>
                                          <td class="reset_6" onmouseover="this.className='reset_6_1';" onmouseout="this.className='reset_6';" title="Focus Far" onmousedown="ctrl_ptz(12, 0);" onmouseup="ctrl_ptz(12,1);"/>
                                        </tr>
                                        <tr>
                                          <td class="reset_7"/>
                                          <td class="reset_8" onmouseover="this.className='reset_8_1';" onmouseout="this.className='reset_8';"  title="Zoom Out" onmousedown="ctrl_ptz(10, 0);" onmouseup="ctrl_ptz(10,1);"/>
                                          <td class="reset_9"/>
                                        </tr>
                                      </table></td>
                                    <td width="24"><div class="right" title="Right" onmouseover="this.className='right_1';" onmouseout="this.className='right';" onmousedown="ctrl_ptz(7, 0);" onmouseup="ctrl_ptz(7,1);"/></td>
                                  </tr>
                                  <tr>
                                    <td/>
                                    <td><div class="down" title="Down" onmouseover="this.className='down_1';" onmouseout="this.className='down';" onmousedown="ctrl_ptz(5, 0);" onmouseup="ctrl_ptz(5,1);"/></td>
                                    <td/>
                                  </tr>
                                </table>
                              </fieldset></td>
                          </tr>
                          <tr>
                            <td height="23" class="main_45">&nbsp;</td>
                          </tr>
                          <tr>
                            <td height="7" style="line-height:7px; background:#0a5c8e;">&nbsp;</td>
                          </tr>
                        </table></td>
                      <td style="width:3px; background:#0a5c8e;">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</div>
</body>
</html>
